<template>
    <div class="dash-board">
      <div class="select-item">
        <el-row style="text-align: center;">
          <el-col :span="12" :offset="6">
            <el-radio-group v-model="radio" class="but-tab" size="mini" @change="changeRadio1(radio1)">
              <el-radio-button label="1">Yesterday</el-radio-button>
              <el-radio-button label="2">Last 7 Days</el-radio-button>
              <el-radio-button label="3">Last 14 Days</el-radio-button>
              <el-radio-button label="4">Last 30 Days</el-radio-button>
            </el-radio-group>
          </el-col>
        </el-row>
      </div>
      <div class="echarts-module">
        <div class="echarts-part">
          <h3>PV</h3>
          <div class="nodata" v-if="showNoData.Echart1">No Data</div>
          <div class="chart Echart1"  v-loading="loading.Echart1"></div>
        </div>
        <div class="echarts-part">
          <h3>UV</h3>
          <div class="nodata" v-if="showNoData.Echart2">No Data</div>
          <div class="chart Echart2"  v-loading="loading.Echart2"></div>
        </div>
        <div class="echarts-part">
          <h3>Active User</h3>
          <div class="nodata" v-if="showNoData.Echart3">No Data</div>
          <div class="chart Echart3"  v-loading="loading.Echart3"></div>
        </div>
        <div class="echarts-part">
          <h3>Active Rate</h3>
          <div class="nodata" v-if="showNoData.Echart4">No Data</div>
          <div class="chart Echart4"  v-loading="loading.Echart4"></div>
        </div>
        <div class="echarts-part">
          <h3>Average Access Time</h3>
          <div class="nodata" v-if="showNoData.Echart5">No Data</div>
          <div class="chart Echart5"  v-loading="loading.Echart5"></div>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
      name: "Dashboard",
      data() {
        return {
          radio: '1',
          echartsObj: {
            Echart1: null,
            Echart2: null,
            Echart3: null,
            Echart4: null,
            Echart5: null
          },
          loading: {
            Echart1: false,
            Echart2: false,
            Echart3: false,
            Echart4: false,
            Echart5: false
          },
          showNoData: {
            Echart1: false,
            Echart2: false,
            Echart3: false,
            Echart4: false,
            Echart5: false
          },
        }
      },
      methods: {
        initEchartsDom(){
          this.echartsObj.Echart1 = this.echarts.init(document.getElementsByClassName('Echart1')[0], null, { renderer: 'canvas' })
          this.echartsObj.Echart2 = this.echarts.init(document.getElementsByClassName('Echart2')[0], null, { renderer: 'canvas' })
          this.echartsObj.Echart3 = this.echarts.init(document.getElementsByClassName('Echart3')[0], null, { renderer: 'canvas' })
          this.echartsObj.Echart4 = this.echarts.init(document.getElementsByClassName('Echart4')[0], null, { renderer: 'canvas' })
          this.echartsObj.Echart5 = this.echarts.init(document.getElementsByClassName('Echart5')[0], null, { renderer: 'canvas' })
          },
      },
      mounted() {
        this.initEchartsDom()
      }
    }
</script>

<style lang="scss" scoped>
  .dash-board{
    /*padding: 20px;*/
    .nodata{
      width: 100%;
      height: 100%;
      text-align:center;
      position: relative;
      top:100px;
      z-index:1;
    }
    .select-item {
      padding: 5px 2vw 20px;
    }
  }
</style>
